﻿(function ($) {

    $.fn.gMenu1Level = function (options) {

        options = $.extend({
            overlap: 30,
            speed: 1000,
            reset: 1500,
            blobColor: 0,                       //0-100 || #000000 - #ffffff
            blobThickness: 2,
            easing: 'easeOutExpo',
            orientation: 'horizontal',          //horizontal - vertical
            float: 'left',                      //left - right
            fullWidth : false,                  //true - false
            clickCallback: function () { },
            hoverCallback: function () { }
        }, options);

        return this.each(function () {

            var nav = $(this),
		 		currentPageItem = $('.selected', nav),
		 		blob,
		 		reset;

            $('> li', nav).click(function () {
                $('.selected', nav).removeClass('selected');
                $(this).addClass('selected');
                options.clickCallback.call(this);
            });

            $('> li', nav).hover(function () {
                options.hoverCallback.call(this);
            });

            nav.addClass(options.orientation);
            $('> li', nav).css('float', options.float);

            $(nav).css('padding', 0);
            $(nav).css('margin', 0);

            if (options.fullWidth == true && options.orientation == 'horizontal') {
                $(nav).css('list-style-type', 'none');

                $('> li', nav).css('width', 100 / parseInt(nav[0].childElementCount) + '%');
                $('> li', nav).css('float', 'left');
                $('> li', nav).css('text-align', 'center');
            }
            else if (options.fullWidth == true && options.orientation == 'vertical') {
                
                $('> li', nav).css('width', '100%');

                $('> li', nav).addClass('ui-button');
                $('> li', nav).addClass('ui-button-text-only');
                $('> li a', nav).addClass('ui-button-text');
            }
            else {

                $('> li', nav).addClass('ui-button');
                $('> li', nav).addClass('ui-button-text-only');
                $('> li a', nav).addClass('ui-button-text');
            }

            blob = $('<li class="blob"></li>').css({
                backgroundColor: options.blobColor,
                position: 'absolute'
            }).appendTo(this);

            if (options.orientation == 'horizontal') {

                blob.css('width', currentPageItem.width());
                blob.css('height', options.blobThickness);
                blob.css('left', currentPageItem.position().left);
                blob.css('top', currentPageItem.position().top + parseInt(options.overlap));

            }

            if (options.orientation == 'vertical') {

                blob.css('width', options.blobThickness);
                blob.css('height', currentPageItem.height());
                blob.css('left', currentPageItem.position().left + parseInt(options.overlap));
                blob.css('top', currentPageItem.position().top);

            }

            var _left = blob.position().left;
            var _width = blob.width();
            var _top = blob.position().top;
            var _height = blob.height();

            $('> li:not(.blob)', nav).hover(function () {
                // mouse over
                clearTimeout(reset);
                if (options.orientation == 'horizontal') {
                    _left = $(this).position().left;
                    _width = $(this).width();
                }
                if (options.orientation == 'vertical') {
                    _top = $(this).position().top;
                    _height = $(this).height();
                }

                blob.animate(
                    {
                        left: _left,
                        width: _width,
                        top: _top,
                        height: _height
                    },
                    {
                        duration: options.speed,
                        easing: options.easing,
                        queue: false
                    }
                );
            }, function () {
                // mouse out
                reset = setTimeout(function () {
                    currentPageItem = $('.selected', nav);
                    if (options.orientation == 'horizontal') {
                        _left = currentPageItem.position().left;
                        _width = currentPageItem.width();
                    }
                    if (options.orientation == 'vertical') {
                        _top = currentPageItem.position().top;
                        _height = currentPageItem.height();
                    }

                    blob.animate({
                        left: _left,
                        width: _width,
                        top: _top,
                        height: _height
                    }, options.speed)
                }, options.reset);
            });


            if (options.blobColor >= 0 && options.blobColor <= 100) {
                blob.progressbar({ value: options.blobColor });
            }

        }); // end each

    };

})(jQuery);